<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <a-card :bordered="false">
      <h3 style="margin-bottom: 20px;">{{ !shareId ? '新增' : '编辑' }}抽奖活动</h3>
      <a-steps :current="2" size="small" style="width: 800px;margin: 20px 0 30px;">
        <a-step title="基础信息" />
        <a-step title="抽奖设置" />
        <a-step title="分享信息" />
      </a-steps>
      <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }">
        <a-form-model-item label="小程序端系统转发好友功能" prop="isShare">
          <a-switch v-model="form.isShare" checked-children="开启" un-checked-children="关闭" />
        </a-form-model-item>
        <a-form-model-item label="小程序端系统分享朋友圈功能" prop="isShareMement">
          <a-switch v-model="form.isShareMement" checked-children="开启" un-checked-children="关闭" />
        </a-form-model-item>
        <a-form-model-item label="小程序卡片图" prop="miniCardImge">
          <JImageUpload
          :uploadParams="getUploadParams()"
          :isMove="false"
          :isMultiple="true"
          :fileSize="10"
          :number="1"
          :accept="'image/*'"
            @fileChange="fileMiniCardImgeChange"
          v-model="miniCardImgeList"
        ></JImageUpload>
        <div>500x400px或者等比例图片，支持jpg、PNG、GIF格式，图片大小建议小于500k</div>
        </a-form-model-item>
        <a-form-model-item label="小程序卡片标题" prop="miniCardTitlte">
          <a-input v-model.trim="form.miniCardTitlte" :maxLength="36" placeholder="最多输入36个字" allowClear />
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button @click="handleBack" style="margin-right: 10px;">上一步</a-button>
          <a-button @click="handleSubmit" type="primary">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </a-spin>
</template>
<script>
import JImageUpload from '../../components/JImageUpload.vue'
import { saveOrUpdateShareInfo, getLuckyDrawShareByShareId } from '@/api/marketingCenter/luckyDraw'
export default {
  components: {
    JImageUpload
  },
  data() {
    return {
      id: this.$route.params.id,
      pageId: this.$route.query.pageId,
      shareId: this.$route.query.shareId || null,
      miniCardImgeList: [],
      spinning: false,
      form: {
        isShare: true,
        isShareMement: true,
        miniCardImge: ''
      },
      rules: {
        isShare: [{ required: true, message: '请选择', trigger: 'change' }],
        isShareMement: [{ required: true, message: '请选择', trigger: 'change' }],
        miniCardImge: [{ required: true, message: '请选择', trigger: 'change' }],
        miniCardTitlte: [{ required: true, message: '请输入', trigger: 'blur' }],
      }
    }
  },
  watch: {
  },
  created() {
    this.getDetails()
  },
  computed: {},
  mounted() {},
  methods: {
    // 获取详情
    getDetails() {
      if (!this.shareId || this.shareId == -1) return
      const data = {
        shareId: this.shareId,
        luckyId: this.id,
        pageId: this.pageId
      }
      getLuckyDrawShareByShareId(data)
      .then(res => {
        if (res.code === 200) {
          const { 
            isShare,
            isShareMement,
            miniCardImge
          } = res.data
          this.form = {
            ...res.data,
            isShare: isShare == 1 ? false : true,
            isShareMement: isShareMement == 1 ? false : true,
          }
          this.miniCardImgeList = miniCardImge ? miniCardImge.split(',') : []
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
      .catch(err => {})
    },

    getUploadParams() {
      return {
        actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
        headers: {
          authorization: 'authorization-text'
        },
        uploadHost: 'https://img.bzhz.jnbygroup.com/'
      }
    },

    // 图片change
    fileMiniCardImgeChange(list) {
      this.form.miniCardImge= list.length ? list[0].url : ''
      this.$refs.rulesForm.validateField(["miniCardImge"])
    },

    // 确认同步
    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          const { isShare, isShareMement } = this.form
          const data = {
            ...this.form,
            isShare: isShare ? 0 : 1,
            isShareMement: isShareMement ? 0 : 1,
            luckyId: this.id,
            pageId: this.pageId
          }
          this.spinning = true
          saveOrUpdateShareInfo(data).then(res => {
            if (res.code === 200) {
              this.spinning = false
              this.$router.go(-3)
            } else {
              this.spinning = false
              this.$message.error(res.msg || res.message)
            }
          }).catch(err => {
            this.spinning = false
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    //返回
    handleBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.my-img-item {
    margin: 0 8px 8px 0;
}
</style>
